<script setup>
import {
    ref
} from 'vue';
import {
    ElMessage
} from 'element-plus';
import {
    getModelListApi,
    createModelApi,
    getCatalogApi,
    generateTableModelApi
} from '@/service/db';

const emit = defineEmits(['fetch-list']);

const dialogVisible = ref(false);
const ruleForm = ref({
    model: '',
    table: '',
    name: '',
    namespace: ''
});

const rules = ref({
    name: [{
        required: true,
        message: '请输入模型名称',
        trigger: 'blur'
    }],
    namespace: [{
        required: true,
        message: '请输入命名空间',
        trigger: 'blur'
    }]
});

const catalogForm = ref({
    table: '',
    catalog: ''
});

const catalogRules = ref({
    table: [{
        required: true,
        message: '请输入表名',
        trigger: 'blur'
    }],
    catalog: [{
        required: true,
        message: '请选择目录',
        trigger: 'blur'
    }]
});

// 获取模型列表
const modelList = ref([]);
const getModelList = () => {
    getModelListApi().then(({
        code,
        data,
        msg
    }) => {
        if (code === 200) {
            modelList.value = data;
        } else {
            ElMessage.error(msg);
        }
    });
}

// 打开抽屉
const openDrawer = (row) => {
    ruleForm.value.table = row.name;
    catalogForm.value.table = row.name;

    dialogVisible.value = true;

    getModelList();
}

// 关闭抽屉
const closeDrawer = () => {
    dialogVisible.value = false;
    ruleForm.value = {
        table: '',
        model: '',
        name: '',
        namespace: ''
    }

    catalogForm.value = {
        table: '',
        catalog: ''
    }
}

// 模型选择
const handleModelChange = (value) => {
    // 从modelList中找到对应的模型
    const model = modelList.value.find(item => item.name === value);
    if (model) {
        ruleForm.value.name = model.name;
        ruleForm.value.namespace = model.namespace;
    }
}

// 表单ref
const ruleFormRef = ref(null);
// 提交
const submitForm = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            createModelApi(ruleForm.value).then(({
                code,
                msg
            }) => {
                if (code === 200) {
                    ElMessage.success(msg);
                    closeDrawer();
                    emit('fetch-list');
                } else {
                    ElMessage.error(msg);
                }
            });
        }
    });
}

// 获取模型目录
const catalogList = ref([]);
const getCatalog = () => {
    getCatalogApi().then(({
        code,
        data,
        msg
    }) => {
        if (code === 200) {
            catalogList.value = data;
        }
    });
}

// 目录dialog
const catalogVisible = ref(false);
// 显示创建模型dialog
const showBuildModel = () => {
    catalogVisible.value = true;

    getCatalog();
}

// 关闭目录
const closeCatalog = () => {
    catalogVisible.value = false;

    catalogForm.value = {
        catalog: ''
    }
}

const catalogFormRef = ref(null);
// 提交目录
const submitCatalog = () => {
    catalogFormRef.value.validate((valid) => {
        if (valid) {
            generateTableModelApi(catalogForm.value).then(({
                code,
                msg
            }) => {
                if (code === 200) {
                    ElMessage.success(msg);
                    closeCatalog();
                    // 刷新模型列表
                    getModelList();
                } else {
                    ElMessage.error(msg);
                }
            });
        }
    });
}

defineExpose({
    openDrawer
})
</script>

<template>
<el-drawer title="模型设置" v-model="dialogVisible" size="30%">

    <el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" label-position="top">
        <!-- 模型列表 select -->
        <el-form-item label="模型列表" prop="modelList">
            <div class="row">
                <div class="left">
                    <el-select v-model="ruleForm.model" placeholder="请选择模型" clearable filterable style="width: 100%" @change="handleModelChange">
                        <el-option v-for="item in modelList" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </div>
                <!-- 生成表型 -->
                <div class="right">
                    <el-button type="primary" @click="showBuildModel">生成表型</el-button>
                </div>
            </div>
        </el-form-item>

        <el-form-item label="模型名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入模型名称"></el-input>
        </el-form-item>
        <!-- 命名空间 -->
        <el-form-item label="命名空间" prop="namespace">
            <el-input v-model="ruleForm.namespace" placeholder="请输入命名空间"></el-input>
        </el-form-item>

        <!-- 提交 -->
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
    </el-form>

    <!-- 模型目录 -->
    <el-dialog v-model="catalogVisible" title="模型目录" width="30%" append-to-body @close="closeCatalog">
        <el-form :model="catalogForm" ref="catalogFormRef" :rules="catalogRules" label-position="top">
            <el-form-item label="表明" prop="table">
                <el-input v-model="catalogForm.table" placeholder="请输入表名"></el-input>
            </el-form-item>
            <!-- 选择目录 -->
            <el-form-item label="选择目录" prop="catalog">
                <el-select v-model="catalogForm.catalog" placeholder="请选择目录" clearable filterable style="width: 100%">
                    <el-option v-for="item in catalogList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <!-- 提交 -->
            <el-form-item>
                <el-button type="primary" @click="submitCatalog">提交</el-button>
                <el-button @click="closeCatalog">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</el-drawer>
</template>

<style scoped lang="less">
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      flex: 1;
      .el-select {
        width: 100%;
      }
    }
    .right {
        padding-left: 10px;
        .el-button {
            width: 100%;
        }
    }
}
</style>
